<template>
  <el-breadcrumb separator="/">
    <el-breadcrumb-item>{{ $t('Home') }}</el-breadcrumb-item>
    <el-breadcrumb-item>{{ $t('BlockChain') }}</el-breadcrumb-item>
    <el-breadcrumb-item>{{ $t('Contract') }}</el-breadcrumb-item>
  </el-breadcrumb>
  <div class="contracts-list">
    <el-card
      v-for="(contract, index) in contracts"
      :key="index"
      class="contract-card"
    >
      <template #header>
        <div class="card-header">
          <span style="font-size: 14px;">{{ $t('contract.name') }} 
            </span>
            <el-tag type="primary" effect="dark">{{ contract.name }}</el-tag>
        </div>
      </template>
      <el-descriptions :column="1" size="small" border>
        <el-descriptions-item :label="$t('contract.address')">
          <span class="address">{{ contract.address }}</span>
        </el-descriptions-item>
        <el-descriptions-item :label="$t('contract.version')">{{ contract.version }}</el-descriptions-item>
        <el-descriptions-item :label="$t('contract.runtime_type')">{{ contract.runtime_type }}</el-descriptions-item>
      </el-descriptions>
    </el-card>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue';
import { ElMessage, ElCard, ElDescriptions, ElDescriptionsItem, ElTag } from 'element-plus';
import { useI18n } from 'vue-i18n';
import ApiClient from '@/api/ApiClient';
import { ApiRequest, ApiRequestBody } from '@/api/ApiRequest';
import { ApiResponse } from '@/api/ApiResponse';
import { config } from '@/config/config';

interface Contract {
  address: string;
  name: string;
  version: string;
  deploymentTime: string;
}

export default defineComponent({
  components: {
    ElCard,
    ElDescriptions,
    ElDescriptionsItem,
    ElTag,
  },
  setup() {
    const { t } = useI18n();
    const contracts = ref<Contract[]>([]);

    const loadContractsInfo = async () => {
      // 模拟从后端获取合约信息
      // contracts.value = [
      //   { address: '0x1234567890123456789012345678901234567890', name: '合约1', version: '1.0.0', deploymentTime: '2023-01-01' },
      //   { address: '0x0987654321098765432109876543210987654321', name: '合约2', version: '2.0.0', deploymentTime: '2023-02-01' },
      //   { address: '0x1122334455667788990011223344556677889900', name: '合约3', version: '3.0.0', deploymentTime: '2023-03-01' },
      // ];
      const request = new ApiRequest(
        "query",
        config.dao_chain_name,
        new ApiRequestBody(
          "CONTRACT_MANAGE",
          "GET_CONTRACT_LIST",
          {}
        )
      );
      ApiClient.sendSync(request, (response: ApiResponse) => {
        if(response.data.code_value as unknown as number == 0){
          const contractResult = response.data.contract_result as { [key: string]: string };
          contracts.value = JSON.parse(contractResult.result);
        }else{
          ElMessage.error(response.data.code);
        }
      });
    };

    onMounted(() => {
      loadContractsInfo();
    });

    return {
      contracts,
      t,
    };
  },
});
</script>

<style scoped>
.contracts-list {
  display: flex;
  flex-wrap: wrap;
  margin-top: 30px;
}

.contract-card {
  width: calc(33% - 20px);
  margin-right: 20px;
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.address {
  word-break: break-all;
}
</style>
